import { html } from "htm/preact";

export function ClearIcon({ size = 24, color = "#3b3b3b" }) {
  return html`<svg
    width=${size}
    height=${size}
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M17.772 8.00021C16.1428 5.63496 13.1618 4.47676 10.2568 5.22169C9.02622 5.53828 7.90505 6.18385 7.01347 7.08917C6.12181 7.99457 5.49343 9.12561 5.19572 10.361C4.89802 11.5964 4.94222 12.8895 5.32358 14.1017C5.70494 15.3138 6.40908 16.3993 7.36047 17.2418C8.31187 18.0842 9.47463 18.6517 10.7241 18.8835C11.9735 19.1153 13.2625 19.0026 14.4527 18.5575C15.643 18.1124 16.6896 17.3517 17.4804 16.357C18.2712 15.3623 18.7763 14.1711 18.9415 12.9111C19.0133 12.3635 19.5154 11.9778 20.063 12.0496C20.6106 12.1214 20.9963 12.6236 20.9245 13.1712C20.7121 14.7911 20.0627 16.3227 19.0459 17.6016C18.0292 18.8805 16.6835 19.8586 15.1532 20.4308C13.6229 21.0031 11.9657 21.1479 10.3592 20.8499C8.75284 20.5519 7.25786 19.8222 6.03463 18.7391C4.81141 17.656 3.90609 16.2604 3.41577 14.7019C2.92545 13.1434 2.86862 11.4808 3.25138 9.89244C3.63415 8.30409 4.44206 6.84989 5.58848 5.68581C6.7349 4.52172 8.17657 3.69166 9.75889 3.28466L9.75957 3.28448C13.2426 2.39116 16.8325 3.63491 19 6.30456V4.00021C19 3.44792 19.4477 3.00021 20 3.00021C20.5523 3.00021 21 3.44792 21 4.00021V9.00021C21 9.55249 20.5523 10.0002 20 10.0002H19.4527C19.4397 10.0005 19.4268 10.0005 19.4139 10.0002H15C14.4477 10.0002 14 9.55249 14 9.00021C14 8.44792 14.4477 8.00021 15 8.00021H17.772Z"
      fill=${color}
    />
  </svg> `;
}

export function SaveIcon({ size = 24, color = "#3b3b3b" }) {
  return html`<svg
    width=${size}
    height=${size}
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V18C5 18.2652 5.10536 18.5196 5.29289 18.7071C5.48043 18.8946 5.73478 19 6 19H18C18.2652 19 18.5196 18.8946 18.7071 18.7071C18.8946 18.5196 19 18.2652 19 18V8.41421L15.5858 5H15V8C15 8.55228 14.5523 9 14 9H8C7.44772 9 7 8.55228 7 8V5H6ZM6 3C5.20435 3 4.44129 3.31607 3.87868 3.87868C3.31607 4.44129 3 5.20435 3 6V18C3 18.7956 3.31607 19.5587 3.87868 20.1213C4.44129 20.6839 5.20435 21 6 21H18C18.7957 21 19.5587 20.6839 20.1213 20.1213C20.6839 19.5587 21 18.7957 21 18V8C21 7.73478 20.8946 7.48043 20.7071 7.29289L16.7071 3.29289C16.5196 3.10536 16.2652 3 16 3H6ZM9 5V7H13V5H9ZM9.87868 11.8787C10.4413 11.3161 11.2043 11 12 11C12.7957 11 13.5587 11.3161 14.1213 11.8787C14.6839 12.4413 15 13.2043 15 14C15 14.7957 14.6839 15.5587 14.1213 16.1213C13.5587 16.6839 12.7957 17 12 17C11.2043 17 10.4413 16.6839 9.87868 16.1213C9.31607 15.5587 9 14.7957 9 14C9 13.2043 9.31607 12.4413 9.87868 11.8787ZM12 13C11.7348 13 11.4804 13.1054 11.2929 13.2929C11.1054 13.4804 11 13.7348 11 14C11 14.2652 11.1054 14.5196 11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071C12.8946 14.5196 13 14.2652 13 14C13 13.7348 12.8946 13.4804 12.7071 13.2929C12.5196 13.1054 12.2652 13 12 13Z"
      fill=${color}
    />
  </svg> `;
}

export function LoadIcon({ size = 24, color = "#3b3b3b" }) {
  return html`<svg
    width=${size}
    height=${size}
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.2929 3.29289C11.6834 2.90237 12.3166 2.90237 12.7071 3.29289L17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711C17.3166 10.0976 16.6834 10.0976 16.2929 9.70711L13 6.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V6.41421L7.70711 9.70711C7.31658 10.0976 6.68342 10.0976 6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289L11.2929 3.29289ZM4 16C4.55228 16 5 16.4477 5 17V19C5 19.2652 5.10536 19.5196 5.29289 19.7071C5.48043 19.8946 5.73478 20 6 20H18C18.2652 20 18.5196 19.8946 18.7071 19.7071C18.8946 19.5196 19 19.2652 19 19V17C19 16.4477 19.4477 16 20 16C20.5523 16 21 16.4477 21 17V19C21 19.7957 20.6839 20.5587 20.1213 21.1213C19.5587 21.6839 18.7957 22 18 22H6C5.20435 22 4.44129 21.6839 3.87868 21.1213C3.31607 20.5587 3 19.7956 3 19V17C3 16.4477 3.44772 16 4 16Z"
      fill=${color}
    />
  </svg>`;
}
